<template>
  <div>
    <h1>App</h1>

    <!-- 
      给组件绑定事件都认为是自定义事件,自定义事件是绑定给组件实例的
      如果想要给组件绑定原生事件,则需要使用.native修饰符,原生事件是绑定给组件的最外层元素
     -->
    <Header ref="header" />
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "App",
  components: {
    Header,
  },
  methods: {
    test(value1, value2) {
      console.log(1, value1, value2);
    },
  },
  mounted() {
    /* 
      除了直接在组件标签上绑定自定义事件,我们还可以在初始化生命周期中给组件实例绑定自定义事件
      组件实例上有一个 $on 的方法 ,可以给自己绑定自定义事件
      $on方法接收的第一个参数是 自定义事件名称, 第二个参数是事件函数
    */
    this.$refs.header.$on("abc", this.test);
  },
};
</script>

<style></style>
